<template>
  <div class="quoteCalculateResult_box" ref="quoteCalculateResult_box">
    <div class="quoteCalculateResult_header">
      <div class="quoteCalculateResult_head_return" @click="returnHistiy">
        <img src="@/pages/mobile/assets/appimg/quoteCalculate/Back@3x.png" alt>
        <span>报价测算</span>
      </div>
      <p>报价测算</p>
    </div>
    <div class="quoteCalculateResult_tab">
      <div class="quoteCalculateResult_tab_header">
        <h3 @click="tabActive='1'" :class="{h3_active:tabActive =='1'}">测算结果信息</h3>
        <h3 @click="tabActive='2'" :class="{h3_active:tabActive =='2'}">租金计划表</h3>
      </div>
      <div></div>
    </div>
    <div
      class="quoteCalculateResult_table wrapperResult"
      ref="wrapperResult"
      :class="{quoteCalculateResult_table_active:tabActive == '2' }"
    >
      <div>
        <div class="quoteCalculateResult_table_result">
          <div class="quoteCalculateResult_table_result_item">
            <p>收益IRR</p>
            <span>含税IRR {{(resultData.rentIrrNotax*100).toFixed(2)}}%</span>
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>收益XIRR</p>
            <span>含税XIRR {{(resultData.rentIrr*100).toFixed(2)}}%</span>
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>首付款金额</p>
            <span>{{(resultData.downPaymentAmount).toFixed(2)}}{{" ("+(resultData.downPaymentRatio*100).toFixed(2)+'%'+")"}}</span>
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>保证金金额</p>
            <span>{{(resultData.depositAmount).toFixed(2)}}{{" ("+(resultData.depositRatio*100).toFixed(2)+'%'+")"}}</span>
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>手续费金额</p>
            <span>{{(resultData.poundageAmount).toFixed(2)}}{{" ("+(resultData.poundageRatio*100).toFixed(2)+'%'+")"}}</span>
          </div>
          <div class="quoteCalculateResult_table_result_item">
            <p>净融资额</p>
            <span>{{(resultData.netFinancingAmount).toFixed(2)}}</span>
          </div>
        </div>
        <div class="quoteCalculateResult_table_result_font">
          <div class="quoteCalculateResult_table_result_font_box">
            <div class="font_box_item">
              <i>*</i>
              <em>更强大的报价测算功能，请登录“官网地址”,在应用中心试用。</em>
            </div>
            <div class="font_box_item">
              <i class="colorStyel">*</i>
              <em class="colorStyel" @click="introduceIndex">更多关于九思金信的信息</em>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="quoteCalculateResult_table"
      :class="{quoteCalculateResult_table_active:tabActive == '1' }"
    >
      <div class="quoteCalculateResult_table_hint">
        <p>&lt; 左右滑动查看数据详情 &gt;</p>
      </div>
      <div class="tab" ref="tab">
        <table ref="tabWrapper" class="tabWrapper">
          <tr class="tab_title">
            <th
              class="tab_item"
              v-for="item in itemList"
              :key="item.index"
              ref="tabitem"
            >{{item.title}}</th>
          </tr>
          <div class="tab_content_box wrapperResultTable" ref="wrapperResultTable">
            <div>
              <tr
                v-for="(itemContent,index) in resultData.rentList"
                :key="itemContent.index"
                class="tab_content"
              >
                <td>{{index+1}}</td>
                <td>{{itemContent.planDate}}</td>
                <td>{{itemContent.rent}}</td>
                <td>{{itemContent.interest}}</td>
                <td>{{itemContent.corpus}}</td>
                <td>{{itemContent.corpusBalance}}</td>
              </tr>
            </div>
          </div>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  name: "",
  props: {
    resultData: {
      type: Object
    }
  },
  data() {
    return {
      tabActive: "1",
      itemList: [
        {
          title: "期次"
        },
        {
          title: "收租日"
        },
        {
          title: "租金"
        },
        {
          title: "利息"
        },
        {
          title: "本金"
        },
        {
          title: "剩余本金"
        }
      ]
    };
  },
  mounted() {
    var fontSize = parseFloat(
      document.getElementsByTagName("html")[0].style.fontSize
    ); //获取html元素
    var eleHeight =
      this.$refs.quoteCalculateResult_box.offsetHeight - fontSize * 2.0;
    this.$refs.wrapperResultTable.style.height = eleHeight + "px";
    this.scrolls = new BScroll(this.$refs.wrapperResult, { click: true });
    this.scrolls = new BScroll(this.$refs.wrapperResultTable, { click: true });
    this.$nextTick(() => {
      this.InitTableScroll();
    });
  },
  methods: {
    introduceIndex() {
      this.$router.push({
        path: "/quoteCalculate/quoteCalculateIntroduce"
      });
    },
    returnHistiy() {
      this.$emit("QcResultClose");
    },
    InitTableScroll() {
      this.$refs.tabWrapper.style.width = 660 + "px";
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.tab, {
            startX: 0,
            click: true,
            scrollX: true,
            scrollY: false,
            eventPassthrough: "vertical"
          });
        } else {
          this.scroll.refresh();
        }
      });
    }
  },
  watch: {
    resultData() {
      this.scroll.finishPullDown(); //下拉刷新， 数据更新完毕，需要调用此方法告诉 better-scroll 数据已加载。
      this.scroll.finishPullUp(); //上拉加载， 数据更新完毕， 需要调用此方法告诉 better-scroll 数据已加载。
      this.$nextTick(() => {
        this.InitTableScroll();
      });
    }
  }
};
</script>

<style scoped lang="less">
.quoteCalculateResult_box {
  z-index: 300;
  width: 100%;
  height: 100%;
  background: #fff;

  position: fixed;
  top: 0;
  z-index: 500;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .quoteCalculateResult_header {
    width: 100%;
    height: 0.44rem;
    line-height: 0.44rem;
    background: #ffffff;
    z-index: 201;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
    .quoteCalculateResult_head_return {
      width: 100%;
      position: fixed;
      top: 0px;
      float: left;
      margin-top: -0.04rem;
      float: left;
      img {
        // width: 0.15rem;
        height: 0.205rem;
        padding-left: 0.085rem;
        padding-top: 0.02rem;
      }
      span {
        font-family: Regular;
        font-size: 0.17rem;
        color: #3e3e3e;
        letter-spacing: -0.41px;
        line-height: 0.22rem;
      }
    }
    p {
      font-family: PingFangSC-Semibold;
      font-size: 0.16rem;
      color: #3e3e3e;
      letter-spacing: -0.41px;
      height: 0.44rem;
      font-weight: 700;
      line-height: 0.44rem;
      text-align: center;
    }
  }
  .quoteCalculateResult_tab {
    width: 100%;
    overflow: hidden;
    height: 0.7rem;
    .quoteCalculateResult_tab_header {
      height: 0.7rem;
      width: 85%;
      margin: 0 auto;
      line-height: 0.7rem;
      h3 {
        height: 0.64rem;
        font-family: PingFangSC-Medium;
        font-size: 0.14rem;
        color: rgba(0, 22, 22, 0.65);
        text-align: center;
        width: 50%;
        float: left;
        transition: all 0.337s ease;
      }
      .h3_active {
        transition: all 0.57s ease;
        color: #2f86f6;
        border-bottom: 0.03rem solid #2f86f6;
      }
    }
  }
  .quoteCalculateResult_table {
    width: 100%;
    overflow: hidden;
    .quoteCalculateResult_table_result {
      background: #ffffff;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
      border-radius: 8px;
      margin: 0 0.28rem;
      .quoteCalculateResult_table_result_item {
        height: 0.8rem; // width: 100%;
        border-bottom: 0.02rem dashed rgba(0, 22, 22, 0.25);
        p {
          padding-top: 0.12rem;
          font-family: PingFangSC-Regular;
          font-size: 0.12rem;
          color: #80858b;
          line-height: 0.15rem;
        }
        span {
          margin-top: 0.09rem;
          font-family: PingFangSC-Regular;
          font-size: 0.2rem;
          color: rgba(0, 22, 22, 0.85);
          text-align: left;
          line-height: 0.28rem;
        }
      }
      .quoteCalculateResult_table_result_item:nth-last-child(1) {
        border-bottom: 0rem dashed rgba(0, 22, 22, 0.25);
      }
    }
    .quoteCalculateResult_table_result_font {
      // width: 100%;
      margin: 0 0.28rem;
      text-align: center;
      margin-top: 0.16rem;
      .quoteCalculateResult_table_result_font_box {
        height: 2.2rem;
        margin-left: 0.1rem;
        text-align: left;
        i {
          margin-left: -10px;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: rgba(0, 22, 22, 0.85);
          text-align: left;
          float: left;
        }
        em {
          // line-height: 0.22rem;
          font-family: PingFangSC-Regular;
          font-size: 0.12rem;
          color: rgba(0, 22, 22, 0.85);
          text-align: left;
          line-height: 0.2rem;
          float: left;
        }
        a {
          font-family: PingFangSC-Regular;
          font-size: 0.12rem;
          color: rgba(0, 22, 22, 0.85);
          text-align: left;
          height: 0.2rem;
          line-height: 0.2rem;
          float: left;
          display: block;
          width: 100%;
        }
        .font_box_item {
          clear: both;
          height: 0.5rem;
          .colorStyel {
            margin-top: 0.1rem;
            color: #2f86f6;
          }
        }
      }
    }
    .quoteCalculateResult_table_hint {
      height: 0.44rem;
      line-height: 0.44rem;
      text-align: center;
      p {
        font-family: PingFangSC-Regular;
        font-size: 0.13rem;
        color: rgba(0, 22, 22, 0.25);
        text-align: center;
      }
    }
    .tab {
      width: 100%;
      display: block;
      overflow: hidden;
      padding: 5px;
      .tabWrapper {
        tr:nth-child(2n) {
          background: #f9fafb;
        }
        .tab_title {
          display: flex;
          .tab_item {
            text-align: center;
            font-family: PingFangSC-Light;
            font-size: 12px;
            color: rgba(0, 22, 22, 0.85);
            letter-spacing: 0;
            height: 0.32rem;
            line-height: 0.32rem;
            flex: 0 0 110px;
            width: 0.9rem;
            background: #f9fafb;
          }
        }
        .tab_content_box {
          .tab_content {
            width: 660px;
            display: flex;
            overflow: hidden;
            td {
              width: 110px;
              text-align: center;
              font-family: Helvetica;
              font-size: 12px;
              color: rgba(0, 22, 22, 0.85);
              letter-spacing: 0;
              line-height: 0.32rem;
            }
          }
        }
        .wrapperResultTable {
          overflow: hidden;
          width: 100%;
        }
      }
    }
  }
  .quoteCalculateResult_table_active {
    height: 0.01px !important;
  }
  .wrapperResult {
    overflow: hidden;
    height: 100%;
  }
  .scroll {
    .wrapper {
      top: 1.58rem;
      .pulldown-wrapper {
        top: 0px;
      }
    }
  }
}
.sss {
  z-index: 6606;
  width: 100%;
  height: 100%;
  position: fixed;
  background: red;
}
</style>
